<script setup lang="ts">
import sideMenu from "./side-menu.vue";
import navBar from "./nav-bar.vue";
</script>

<template>
  <div class="home-page">
    <nav-bar />
    <side-menu />
    <div class="content-wrapper">
      <router-view />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .home-page {
  position: relative;
  width: 100%;
  height: 100%;
  background: white;

  /* 增加阴影效果 */
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
}

.content-wrapper {
  position: absolute;
  left: 60px;
  top: 66px;
  right: 0;
  bottom: 0;
  background: rgba(248, 248, 249, 0.95); /* 半透明背景 */
  border-radius: 10px; /* 圆角效果 */
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* 添加内容区的阴影 */
  overflow: auto; /* 防止内容溢出 */
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    left: 0;
    top: 50px; /* 适应小屏幕 */
    padding: 10px;
  }
}

/* 对nav-bar和side-menu的优化 */
nav-bar, side-menu {
  z-index: 10; /* 确保它们在内容上方 */
}

/* 页面过渡动画效果 */
.home-page {
  transition: background-color 0.3s ease-in-out;
}

/* 内容区的滚动动画 */
.content-wrapper {
  transition: transform 0.2s ease-in-out;
  will-change: transform;
}
</style>
